import React,{ useState, useEffect,memo } from 'react';
import { Form, Row, Col, Space, Button, Table,Pagination } from 'antd';
import type { PaginationProps } from 'antd';
import AdvancedModal from '@/components/Modal/AdvancedModal';
import { FormInput } from '@/components/SearchForm/SearchFormItem';
import { getList } from '@/service/order';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};
const pageSizeOptions = [10,20]
function SelectOrder({ setIsOpen, isOpen, title,selectOrder }: any) {
  const [form] = Form.useForm();
  const [list, setList] = useState([]);
  const [page, setPage] = useState({
    size:10,
    current:1,
  });
  const [total, setTotal] = useState(0)
  const [selectedKeys, setSelectedKeys] = useState<any[]>([])
  const [orderReductionAll,setOrderReductionAll] = useState<any>([])
   // 减免订单列表
   const orderReduction =(info:any,params: any)=>{
    getList({...info,...params}).then((res) => {
      if (res.success) {
        setList(() => res?.data?.records);
        setTotal(res?.data?.total)
      }
    });
  }
  // 续租订单列表
  const orderRenewal = (info:any,params: any)=>{
    getList({...info,...params}).then((res) => {
      if (res.success) {
        setList(() => res?.data?.records);
        setTotal(res?.data?.total)
      }
    })
  }
  useEffect(() => {
    if(title ==='选择减免订单'){
      const info ={orderCarStatus:99}
      orderReduction(page,info)
    }else if(title === '选择续租订单'){
      orderRenewal(page,{rentType:1,orderCarStatus:99})
    }
  }, []);

  // 页面改变
  const pginatiChange : PaginationProps['onChange'] = (pages:any,pageSize:any) => {
    setPage({ size:pageSize,
      current:pages,})
      const page1 = {
        size:pageSize,
        current:pages,
      }
    if(title ==='选择减免订单'){
      orderReduction(page1,{orderCarStatus:99})
    }else if(title === '选择续租订单'){
      orderRenewal(page1,{rentType:1,orderCarStatus:99})
    }
  };
  // 清空
  const onReset = () => {
    form.resetFields();
    if(title ==='选择减免订单'){
      orderReduction(page,{orderCarStatus:99})
    }else if(title === '选择续租订单'){
      orderRenewal(page,{rentType:1,orderCarStatus:99})
    }

  };
  // 搜索
  const onFinish = (values: any) => {
    const data1 = {...values}
    const count = {
      size:10,
      current:1,
    }
    setPage(count)
    if(title ==='选择减免订单'){
      const info1 = {...data1,orderCarStatus:99}
      orderReduction(count,info1)
    }else if(title === '选择续租订单'){
      const info2 = {...data1,rentType:1,orderCarStatus:99}
      orderRenewal(count,info2)
    }

  };
  // 单选选中
  const onDetails = (value:any)=>{
    setIsOpen(false)
    const list1 = []
    list1.push(value)
    selectOrder(list1)
  }
  const columns = [
    {
      title: '订单编号',
      dataIndex: 'orderCarNo',
      key: 'orderCarNo',
    },
    {
      title: '车牌号',
      dataIndex: 'plateNo',
      key: 'plateNo',
    },
    {
      title: '司机名称',
      dataIndex: 'driverName',
      key: 'driverName',
    },
    {
      title: '订单状态',
      dataIndex: 'orderCarStatusname',
      key: 'orderCarStatusname',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render:(text:any,record:any)=>(
          <>
            <Button  type="link"
              onClick={() => {
                onDetails(record);
              }}>选择</Button>
          </>
        )
    },
  ];
  // 多选确定
  const btnChange = ()=>{
    selectOrder(orderReductionAll);
    setIsOpen(false)
  }
  return (
    <AdvancedModal
      title={title}
      setIsOpen={setIsOpen}
      isOpen={isOpen}
      width={980}
      footer={null}
    >
      <Form form={form} onFinish={onFinish} {...layout}>
        <Row gutter={24}>
          <Col span={12}>
            <FormInput
              name="orderCarNo"
              label="订单编号"
              placeholder="请输入订单编号"
            />
          </Col>
          <Col span={12}>
            <FormInput
              name="lesseeName"
              label="司机名称"
              placeholder="请输入司机名称"
            />
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={6} offset={17}>
            <Form.Item {...tailLayout}>
              <Space>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
                <Button onClick={onReset}>重置</Button>
              </Space>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      {title ==='选择减免订单'?
        <Table
          rowSelection={{
            type: 'checkbox',
            onChange: (
              selectedRowKeys: React.Key[],
              selectedRows: any[],
            ) => {
              setOrderReductionAll(selectedRows)
              setSelectedKeys(selectedRowKeys)
            },
            selectedRowKeys: selectedKeys,
          }}
          columns={columns}
          dataSource={list}
          size="small"
          pagination={false}
          rowKey={(record:any)=>record?.id}
        />:
        <Table
          columns={columns}
          dataSource={list}
          size="small"
          pagination={false}
          rowKey={(record:any)=>record?.id}
        />
      }

      <div style={{height:'50px',marginTop:'10px'}}>
        <Pagination onChange={pginatiChange} pageSize={page.size} pageSizeOptions={pageSizeOptions} showSizeChanger current={page?.current} total={total} showTotal={(totals:number|string) => `总数：${totals}条`} style={{width:'90%',float:'left',textAlign:"center"}} />
        {title ==='选择减免订单'&& <Button type='primary' onClick={btnChange} style={{width:'10%',float:'right'}}>确定</Button>}
      </div>

    </AdvancedModal>
  );
}

export default memo(SelectOrder) ;
